import React from 'react'
import { ListView } from 'antd-mobile';

export default class List extends React.PureComponent {
    constructor(props) {
        super(props);
        const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
        const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID];

        const dataSource = new ListView.DataSource({
            getRowData,
            getSectionHeaderData: getSectionData,
            rowHasChanged: (row1, row2) => row1 !== row2,
            sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
        });

        this.state = {
            dataSource,
            isLoading: true,
            height: document.documentElement.clientHeight * 3 / 4,
        };
        this.data = [
            {
                img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png',
                title: 'Meet hotel',
                des: '不是所有的兼职汪都需要风吹日晒',
            },
            {
                img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
                title: 'McDonald\'s invites you',
                des: '不是所有的兼职汪都需要风吹日晒',
            },
            {
                img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
                title: 'Eat the week',
                des: '不是所有的兼职汪都需要风吹日晒',
            },
        ];
        this.pageIndex = 0;
        this.dataBlobs = {};
        this.sectionIDs = [];
        this.rowIDs = [];
        this.NUM_SECTIONS = 2;
    }
    componentDidMount() {
        const { dataBlobs, sectionIDs, rowIDs } = this.getData();
        console.log(dataBlobs, sectionIDs, rowIDs)
        this.setState({
            dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlobs, sectionIDs, rowIDs),
            isLoading: false,
        });
    }
    getData() {
        const dataBlobs = this.dataBlobs;
        let sectionIDs = this.sectionIDs;
        let rowIDs = this.rowIDs;
        const NUM_SECTIONS = this.NUM_SECTIONS;
        for (let i = 0; i < NUM_SECTIONS; i++) {
            const ii = (this.pageIndex * NUM_SECTIONS) + i;
            const sectionName = `hello ${ii}`;
            sectionIDs.push(sectionName);
            dataBlobs[sectionName] = `header ${ii}`;
            rowIDs[ii] = [];
            for (let j = 0; j < this.data.length; j++) {
                const rowName = `S${ii}, R${j}`;
                rowIDs[ii].push(rowName);
                dataBlobs[rowName] = rowName;
            }
        }
        sectionIDs = [...sectionIDs];
        rowIDs = [...rowIDs];
        return {
            dataBlobs,
            sectionIDs,
            rowIDs
        }

    }
    onEndReached = () => {
        console.log('onEndReached')
        this.setState({
            isLoading: true,
        })
        setTimeout(() => {
            this.pageIndex++;
            const { dataBlobs, sectionIDs, rowIDs } = this.getData();
            this.setState({
                dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlobs, sectionIDs, rowIDs),
                isLoading: false,
            });
        }, 500);
    }
    render() {
        const data = this.data;
        let index = data.length - 1;
        const row = (rowData, sectionID, rowID) => {
            if (index < 0) {
                index = data.length - 1;
            }
            const obj = data[index--];
            return (
                <div key={rowID} style={{ padding: '0 15px' }}>
                    <div
                        style={{
                            lineHeight: '50px',
                            color: '#888',
                            fontSize: 18,
                            borderBottom: '1px solid #F6F6F6',
                        }}
                    >{obj.title}</div>
                    <div style={{ display: '-webkit-box', display: 'flex', padding: '15px 0' }}>
                        <img style={{ height: '64px', marginRight: '15px' }} src={obj.img} alt="" />
                        <div style={{ lineHeight: 1 }}>
                            <div style={{ marginBottom: '8px', fontWeight: 'bold' }}>{obj.des}</div>
                            <div><span style={{ fontSize: '30px', color: '#FF6E27' }}>35</span>¥ {rowID}</div>
                        </div>
                    </div>
                </div>
            );
        };
        const sectionHeader = (sectionData, sectionID) => {
            return (
                <div>Header</div>
            )
        }
        return (
            <ListView
                dataSource={this.state.dataSource}
                renderFooter={() => (<div style={{ padding: 30, textAlign: "center" }}>
                    {this.state.isLoading ? 'Loading' : 'Loaded'}
                </div>)}
                renderRow={row}
                renderSectionHeader={sectionHeader}
                style={{
                    height: this.state.height,
                    overflow: 'auto',
                }}
                pageSize={4}
                onScroll={() => { console.log('scroll'); }}
                scrollRenderAheadDistance={500}
                onEndReached={this.onEndReached}
                onEndReachedThreshold={10}
            />
        )
    }
}